<template>
    <div class="register">
        <div class="register-con">
             <h4>
                新用户注册
             </h4>
             <p>很高兴您将成为商城的会员（注册只需一步）</p>
              <!-- :value 就相当于自定义属性 -->
              <!-- @input 就相当于自定义事件 -->
              <!-- <yx-input :modelValue="title" @input="input"></yx-input> -->
              <!-- 手机号 -->
             <yx-input v-model="mobile" placeholder="手机号码" @blur="mobileFn" :class="regMobile==0?'':regMobile==1?'success':'error'">
                <template #rules>
                    {{regMobile==2?'必填':''}}
                </template>
                <template #icon>
                    <i class="iconfont icon-shouji"></i>
                </template>
             </yx-input>
             <!-- 密码 -->
             <yx-input v-model="pwd" placeholder="密码" @blur="pwdFn" :class="regPwd==0?'':regPwd==1?'success':'error'" :type="isEye?'text':'password'">
                 <template #rules>
                    {{regPwd==2?'必填':''}}
                </template>
                <template #icon>
                    <i :class="isEye?'iconfont icon-yanjing':'iconfont icon-biyanjing'" @click="isEye = !isEye"></i>
                </template>
             </yx-input>
             <!-- 确认密码 -->
             <yx-input v-model="confirmPwd"  placeholder="确认密码" type="password" @blur="confirmFn" :class="regConfirm==0?'':regConfirm==1?'success':'error'">
                <template #rules>
                    {{regConfirm==2?"密码不一致":''}}
                </template>
                <template #icon>
                    <i class="iconfont icon-biyanjing"></i>
                </template>
             </yx-input>
             <!-- 用户名 -->
             <yx-input v-model="nick" placeholder="用户名" @blur="nickFn" :class="regNick==0?'':regNick==1?'success':'error'">
                 <template #rules>
                    {{regNick==2?"必填":''}}
                </template>
                <template #icon>
                    <i class="iconfont icon-biyanjing"></i>
                </template>
              
             </yx-input>
             <!-- 图形验证码 -->
             <yx-input v-model="imgCode">
                <template #icon>
                   <img class="img-code" :src="`https://api.it120.cc/small4/verification/pic/get?key=${key}`"  @click="key = new Date().getTime()"/>
                </template>
             </yx-input>
            <!-- 城市选择 -->
             <yx-input v-model="provice" @click="show=true">
               
             </yx-input>
             <!-- 短信验证码 -->
              <yx-input v-model="code">
               <template #icon>
                    <button class="btn" @click="sendCode" :disabled="disabled">{{btnMsg}}</button>
                </template>
             </yx-input>
             <!-- 注册按钮 -->
             <button class="register-btn" @click="register">立即注册</button>
             <router-link to="/login" custom v-slot="{navigate}" >
                <p @click="navigate" class="link">已有账号？ 立即登录</p>
             </router-link>
        </div>
        <!-- 弹出框 -->
        <van-popup v-model:show="show" position="bottom" :style="{ height: '50%' }">
            <van-area title="标题" :area-list="areaList" :columns-num="2" @confirm="confirmSubmit"/>


        </van-popup>

       
    
        
    </div>
</template>
<script>
import yxInput from '@/components/yxInput'
import {ref,reactive,toRefs} from 'vue'
import { areaList } from '@vant/area-data';
import {getSms,registerApi} from '@/utils/second.js'
import { Toast } from 'vant';
export default {
    setup(){
        const data = reactive({
            mobile:'',//手机号码
            pwd:'',//密码
            confirmPwd:'',
            imgCode:'',//图形验证码
            provice:'',//城市选择
            code:'',//短信验证码
            regMobile:0,//0表示你没有触摸过，1表示校验通过，2，校验不通过
            regPwd:0,//0表示你没有触摸过，1表示校验通过，2，校验不通过
            regConfirm:0,//0表示你没有触摸过，1表示校验通过，2，校验不通过
            isEye:false,//闭眼睛
            nick:'',//用户名
            regNick:0,//0表示你没有触摸过，1表示校验通过，2，校验不通过
            key:new Date().getTime(),//默认的时间戳
            show:false,
            btnMsg:'发送验证码',
            disabled:false,//按钮的状态
         
        })
        // 失去焦点触发的事件
         const mobileFn = ()=>{
            // 手机号的正则
            let regM = /^1[3|5|6|7|8|9][0-9]{9}$/
            // test()  方法校验正则 返回值是boolean值 通过true 否则false
            data.regMobile = regM.test(data.mobile)?1:2
            console.log( data.regMobile);

         }
        //  密码
        const pwdFn = ()=>{
            // 如果密码框不为空赋值为1，如果密码框为空，赋值为2
           data.regPwd = data.pwd?1:2
        }
        // 确认密码
        const confirmFn = ()=>{
            data.regConfirm = data.pwd==data.confirmPwd?1:2
        }
        const nickFn = ()=>{
            data.regNick = data.nick?1:2
        }
        const confirmSubmit = (val)=>{
            console.log(val);
            data.provice = `${val[0].name} ${val[1].name}`
            data.show =false

        }
        // 发送验证码
        const sendCode = ()=>{
            getSms({mobile:data.mobile,key:data.key,picCode:data.imgCode}).then(res=>{
                console.log(res);
                if(res.code == 0){
                    Toast('获取验证码成功')
                }else{
                    Toast(res.msg)
                }
                data.disabled = true
                let count = 5
                let timer = setInterval(()=>{
                    if(count>1){
                        count--
                        data.btnMsg = `还剩下${count}s`
                    }else{
                        clearInterval(timer)
                        data.disabled = false
                        data.btnMsg = '发送验证码'
                    }
                },1000)




            })
           
        }
        // 注册
        const register = ()=>{
            registerApi({mobile:data.mobile,pwd:data.pwd,code:data.code}).then(res=>{
                console.log(res);
                 if(res.code == 0){
                    Toast('注册成功')
                }else{
                    Toast(res.msg)
                }
            })
        }
         return {mobileFn,...toRefs(data),pwdFn,confirmFn,nickFn,areaList,confirmSubmit,sendCode,register}
    },
    components:{
        yxInput
    }
}
</script>
<style lang="scss" scoped>
.register{
    padding: 15px;
    .register-con{
        border:1px solid #ccc;
        padding: 40px 30px 10px 30px;
        h4{
            margin-top: 20px;
            font-size: 20px;
        }
        p{
             margin-top: 30px;
             font-size:14px;
             color:#999;
        }
    }

}
.success{
    border: 1px solid rgb(56, 219, 36);
    background: rgb(225, 255, 223)
}
.error{
    border: 0.01rem solid rgb(225, 44, 30);
    background: rgb(255, 233, 228);
}
.img-code{
    width:144px;
    height: 49px;
}
.btn{
    border:none;
    font-size: 14px;
    color:#444;
}
.register-btn{
    width: 210px;
    height: 42px;
    border-radius: 6px;
    background: -webkit-gradient(linear, left top, right top, from(#5ea6f8), to(#bb87f6));
    background: linear-gradient(90deg, #5ea6f8, #bb87f6);
    line-height: 42px;
    font-size: 16px;
    color: white;
    margin: 0 auto;
    margin-top: 20px;
    display: block;
    border: none;
    text-align: center;
}
.link{
    width: 100%;
    color: #549ff9!important;
    margin-top: 20px;
    text-align: center;
}
</style>
